<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="node_modules/Swiper-4.0.7/dist/css/swiper.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="node_modules/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        
    </style>
    <title>享V-视频分享网站</title>
</head>

<body>
    <div id="header">
        <div id="nav">
            <!-- logo -->
            <div id="logo">
                <a href="/" target="_self" title="首页">
                    <img src="images/logo.png" alt="logo" />
                </a>
            </div>

            <!-- search -->
            <div id="search-area">
                <a href="javascript:void(0)" class="dropdown">
                    <span>视频</span>
                    <span>作者</span>
                </a>
                <input type="text" name="search-keyword" class="search-input" value="123">
                <a href="javascript:void(0)" class="search-btn">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </a>
            </div>

            <!-- login -->
            <div id="login-area">
                <a href="#" class="signin-btn">登录</a>
                <a href="#" class="signup-btn">注册</a>
            </div>

            <div id="user-area">
                <a href="#" class="user-name">用户123</a>
                <a href="#" class="user-btn cl"><i class="fa fa-cog" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="breadcrumbs cl">
            <div class="container">
                <a href="#" class="breadcrumbs-nav">全部视频</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">兴趣·生活</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">生活百科</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">时尚美妆</a>
                <span class="breadcrumbs-arrow">></span>
                <a href="#" class="breadcrumbs-nav">完颜老师—A上品形象修练术、款型选择、色彩搭配</a>
            </div>
        </div>
        <div class="course-block cl">
            <div class="container">
                <div class="inner-left"></div>
                <div class="inner-right">
                    <h1 class="course-title">【1元体验课】德国红点设计奖得主亲自传授：信息图制作独家秘术</h1>
                    <div class="course-title-below cl">
                        <span class="line-item">444人 学习</span>
                        <span class="line-icon"></span>
                        <span class="line-item">好评率 100%</span>
                        <span class="line-icon"></span>
                        <span class="line-item collection"><i class="fa fa-heart" aria-hidden="true"></i>收藏（<span class="count">999</span>人）</span>
                    </div>
                    <div class="course-desc">视频导读</div>
                    <a href="#" class="btn-once">立即观看</a>
                </div>
            </div>
        </div>
        <div class="course-info cl container">
            <div class="info-author">
                <div class="author-avator cl">
                    <a href="#">
                        <img class="avator-img" src="images/11baiyang.jpg" alt="头像" title="头像">
                        <span class="avator-name">小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育小小教育</span>                    
                    </a>
                </div>
                <div class="author-intro cl">
                    <div class="intro-item good-comment cl">
                        <p>好评率</p>
                        <p class="data">100%</p>
                    </div>
                    <div class="intro-item-line"></div>
                    <div class="intro-item count cl">
                        <p>视频数</p>
                        <p class="data">141</p>
                    </div>
                    <div class="intro-text cl">
                        小小学院是一家专业的在线教育机构，专注于开发设计与职场领域的创新线上视频，帮助职场小白提升个人竞争力，通往成功的道路。我们的使命是带给人们一种新的眼光、一种新的想像，在学习的旅程里，邀请你一起来探索、一起看见自己无穷的可能性。
                    </div>
                </div>
            </div>
            <div class="info-content">
                <ul class="tab-nav hd">
                    <li class="tab-item tab-basic">视频概述</li>
                    <!-- <li class="tab-item tab-catalog">视频目录</li> -->
                    <li class="tab-item tab-comment">视频评论</li>
                    <li class="tab-item tab-resource on">视频资料</li>
                </ul>
                <div class="tab-content cl bd">
                    <ul class="content basic cl">
                        <div class="basic-content">这是视频概述</div>
                    </ul>
                    <!-- <ul class="content catalog cl">这是视频目录</ul> -->
                    <ul class="content comment cl">
                        <li>
                            <div class="comment-left cl">
                                <img src="images/11baiyang.jpg" alt="评论者头像">
                                <p>甲***</p>
                            </div>
                            <div class="comment-right cl">
                                <div class="comment-star">评分:99.99</div>
                                <div class="comment-desc">123346</div>
                                <div class="comment-date">2018-01-01</div>
                            </div>
                        </li>
                    </ul>
                    <ul class="content resource cl">
                        <li>
                            <div class="resoure-list">
                                <div class="r-thead cl">
                                    <div class="r-th">文件名称</div>
                                    <div class="r-th-sm">文件类型</div>
                                    <div class="r-th-sm">文件大小</div>
                                </div>
                                <div class="r-td cl">
                                    <div class="r-th"><a href="#">123.jpg</a></div>
                                    <div class="r-th-sm">JPG</div>
                                    <div class="r-th-sm">1.32MB</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <div id="footer">
        <div class="container cl">
            <div class="footer-link cl">
                <a href="#" title="网站首页">网站首页</a>
                <a href="#" title="人才招募">人才招募</a>
                <a href="#" title="联系我们">联系我们</a>
                <a href="#" title="常见问题">常见问题</a>
                <a href="#" title="常见问题">意见反馈</a>
                <a href="#" title="友情链接">友情链接</a>
                <a href="javasript:void(0)" title="官方微信">
                    官方微信
                    <div class="qrcode">
                        <img src="images/qrcode.png" alt="官方微信" title="官方微信">
                    </div>
                </a>
            </div>
            <p>© 2018 enjoyV.com Power By Alan</p>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script>
        $(".info-content").slide({
            effect:"fade",
            trigger:"click",
            pnLoop:false
        });
        $(".line-item.collection").click(function(){
            $(this).find("i").toggleClass("active")
        })
    </script>
</body>

</html>